import { memo } from 'react';
import type { ReactNode, FC } from 'react';

import { NavLink } from 'react-router-dom';
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

import { HeaderWrapper, HeaderWrapperContent } from './style';
import { titleDatas } from '@/assets/data/loacl_data';
interface IProps {
  children?: ReactNode;
  setOpen: (val: boolean) => void;
}

const AppHeader: FC<IProps> = (props) => {
  const { setOpen } = props;
  return (
    <>
      <HeaderWrapper>
        <HeaderWrapperContent className="w1100">
          <a className="logo sprite_01" href="/">
            网易云音乐
          </a>
          <div className="titles">
            {titleDatas.map((item) => {
              return (
                <div className="item" key={item.title}>
                  {item.type === 'path' ? (
                    <NavLink to={item.link} className={({ isActive }) => (isActive ? 'active' : '')}>
                      {item.title}
                      <div className="selected sprite_01"></div>
                    </NavLink>
                  ) : (
                    <a href={item.link} target="_blank">
                      {item.title}
                    </a>
                  )}
                </div>
              );
            })}
          </div>
          <Input className="search" placeholder="音乐/视频/电台/用户" prefix={<SearchOutlined className="icon" />} />
          <a className="button">创作者中心</a>
          <a className="login" onClick={() => setOpen(true)}>
            登录
          </a>
        </HeaderWrapperContent>
        <div className="divide"></div>
      </HeaderWrapper>
    </>
  );
};

export default memo(AppHeader);
